<template>
  <div class="detail" id="Detail">
    <detail-nav-bar ref="detailNavBar" class="detail-nav-bar" @titleClick="titleClick" />
    <scroll
      class="content" 
      ref="scroll" 
      :probeType="3" 
      @scroll="contentScroll" 
      :data="[topImages, goods, shop, 
      detailInfo, paramInfo, commentInfo, recommendList]" 
    >
      <detail-swiper :banners="topImages" />
      <detail-base-info :goods="goods" />
      <detail-shop-info :shop="shop" />
      <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoad" />
      <detail-param-info ref="paramInfoRef" :paramInfo="paramInfo" />
      <detail-comment-info ref="commentInfoRef" :comment-info="commentInfo" />
      <detail-recommend-info ref="recommendListRef" 
      :recommend-list="recommendList" />
    </scroll>

    <detail-botton-bar @addCart="addToCart"/>
    <back-top @backTop="backTop" v-show="showBackTop" />

  </div>
</template>

<script>
// 导入请求相关
import {
  getDetailData,
  getRecommend,
  Goods,
  Shop,
  GoodsParam
} from "@/network/detail.js";
// 导入组件相关
import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "./childComps/DetailSwiper";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailParamInfo from "./childComps/DetailParamInfo";
import DetailCommentInfo from "./childComps/DetailCommentInfo";
import DetailRecommendInfo from "./childComps/DetailRecommendInfo";
import DetailBottonBar from "./childComps/DetailBottonBar";
// 插件相关
import Scroll from "@/components/content/scroll/Scroll.vue";

import { mixinRefresh, mixinGoTop } from "@/common/utils/mixin.js";
import {mapActions} from 'vuex'

export default {
  name:'Detail',
  mixins: [mixinRefresh, mixinGoTop],
  data() {
    return {
      iid: null,
      topImages: [], // banner数据
      goods: {}, // DetailBaseInfo数据
      shop: {}, //  DetailShopInfo数据
      detailInfo: {}, // DetailGoodsInfo数据
      paramInfo: {}, // DetailParamInfo数据
      commentInfo: {}, // DetailCommentInfo数据
      recommendList: [], // DetailRecommendInfo数据
      themeTopYs:[], // 记录锚点offsetTop高度
      currentIndex: 0, // 滚动时防止多次计算

      toastMessage:'',
      toastShow:false,
    };
  },
  created() {
    this._getDetailData();
    this._getRecommend();
  },
  updated(){
    this._getOffsetTops()  // 组件跟新完成后计算高度
  },
  methods: {
    ...mapActions(['getCartList']),
    _getDetailData() {
      this.topImages = []; // 清空上一次缓存的banner数据，由于组件缓存机制？
      // 1、保存传入的iis
      this.iid = this.$route.params.iid;
      // 2、根据iid请求数据
      getDetailData(this.iid).then(res => {
        // 2.1.获取结果
        const data = res.result;
        // console.log(data);
        
        // 2.2.获取顶部信息
        this.topImages = data.itemInfo.topImages;
        // 2.3.获取商品信息
        this.goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        // 2.4.获取店铺信息
        this.shop = new Shop(data.shopInfo);
        // 2.5.获取商品信息
        this.detailInfo = data.detailInfo;
        // 2.6.保存参数信息
        this.paramInfo = new GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );
        // 2.7.保存评论信息
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
      });
    },
    _getRecommend() {
      // 请求DetailRecommendInfo数据
      getRecommend()
        .then(res => {
          this.recommendList = res.data.list;
        })
        .catch(err => {
          console.log(err);
        });
    },
    imgLoad() { // 监听图片加载完毕
      this.newRefresh(); // 新refresh函数，mixin中
    },
    // 实时滚动事件：拿到scroll传过来的position包含了x、y轴信息
    contentScroll(position) {
      // mixin中决定backTop是否显示
      this.listenShowBackTop(position);
      // 监听滚动到哪一个主题
      this._listenScrollTheme(-position.y)
    },
    titleClick(index){  // 跳转到对应位置
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 300)
    },
    _getOffsetTops(){ // 获取锚点offsetTop高度函数
      this.themeTopYs = [] // 清空，防止多次push
      this.themeTopYs.push(0)
      this.themeTopYs.push(this.$refs.paramInfoRef.$el.offsetTop)
      this.themeTopYs.push(this.$refs.commentInfoRef.$el.offsetTop)
      this.themeTopYs.push(this.$refs.recommendListRef.$el.offsetTop)
      this.themeTopYs.push(Number.MAX_VALUE)
    },
    _listenScrollTheme(position){
      this.themeTopYs.map((item, index, arr) => {
        if( this.currentIndex != index && (position >= item) && (position <= arr[index+1]) ){
          this.currentIndex = index   // this.currentIndex != index 减少开销
          this.$refs.detailNavBar.curertIndex = index
        }
      })
    },
    addToCart(){
      // 1、获取购物车需要展示的信息
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.lowNowPrice
      product.iid = this.iid
      
      // mapActions代替了this.$store.dispatch('getCartList',product)
      this.getCartList(product)
      .then(res => {  // 拿到axtions中返回的Promise
        this.$toast.show(res, 1500)
      })

    }
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    Scroll,
    DetailCommentInfo,
    DetailRecommendInfo,
    DetailBottonBar
  }
};
</script>



<style lang="scss" scoped>
#Detail {
  height: 100vh;
  position: relative;
  z-index: 500;
  background-color: #fff;
}
.detail-nav-bar {
  position: relative;
  z-index: 600;
  background: #ffffff;
}

.content {
  position: absolute;
  top: 0.86rem;
  left: 0;
  right: 0;
  bottom: 58px;
  overflow: hidden;
}


</style>